<!--  -->

<style lang='scss' type='stylesheet/scss' scoped>
.list-header {
  display: flex;
  padding: 0 30px;
  box-sizing: border-box;
  height: 48px;
  color: black;
  line-height: 48px;
  font-size: 0;
  text-align: center;
  .el-icon-success {
    font-size: 16px;
    line-height: 48px;
    color: #666;
    flex: 0 0 40px;
    &.active {
      color: #37a037;
    }
  }
  .fileName {
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    flex: 1;
  }
  .fileSize {
    cursor: pointer;
    font-size: 12px;
    flex: 0 0 150px;
    width: 150px;
  }
  .updateTime {
    cursor: pointer;
    font-size: 12px;
    flex: 0 0 180px;
    width: 180px;
  }
}
</style>

<template>
  <div class="list-header">
    <i class="el-icon-success"
       @click="checkAllFiles"
       :class="fileList.length === checkFiles.length && fileList.length?'active':''"></i>
    <div v-if="!isRow"
         @click="clearFiles"
         class="fileName">
      {{checkFiles.length?checkFiles.length+'个文件被选中':'全选'}}
    </div>
    <div class="fileName"
         v-if="isRow"
         @click="updateSort('file')">
      文件名
      <i :class="`el-icon-${sort.split('_')[1]==='down'?'bottom':'top'}`"
         v-if="sort.split('_')[0]==='file'"></i>
    </div>
    <div class="fileSize"
         v-if="isRow"
         @click="updateSort('size')">
      文件大小
      <i :class="`el-icon-${sort.split('_')[1]==='down'?'bottom':'top'}`"
         v-if="sort.split('_')[0]==='size'"></i>
    </div>
    <div class="updateTime"
         v-if="isRow"
         @click="updateSort('time')">
      更新日期
      <i :class="`el-icon-${sort.split('_')[1]==='down'?'bottom':'top'}`"
         v-if="sort.split('_')[0]==='time'"></i>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["checkFiles", "fileList", "isRow"])
  },
  data() {
    return {
      sort: null
    };
  },
  created() {
    let sort = localStorage.getItem("sort_by");
    if (!sort) {
      this.updateSort("file");
    }
    this.sort = localStorage.getItem("sort_by");

    this.$store.dispatch("file/sortFiles");
  },
  methods: {
    // 清空 checkfiles
    clearFiles() {
      this.$store.commit("file/CLEAR_FILES");
    },
    checkAllFiles() {
      this.$store.commit("file/CHECK_ALL_FILES");
    },
    updateSort(type) {
      let sort = localStorage.getItem("sort_by");
      if (!sort || sort.split("_")[0] !== type) {
        localStorage.setItem("sort_by", type + "_down");
      } else {
        localStorage.setItem(
          "sort_by",
          type + "_" + (sort.split("_")[1] === "down" ? "up" : "down")
        );
      }

      this.sort = localStorage.getItem("sort_by");

      this.$store.dispatch("file/sortFiles");
    }
  }
};
</script>
